<template>
  <div>
    <top current="login"></top>
    <div class="main-content login">
      <div class="login-main">
        <div class="lm-top">
          <el-form ref="phoneForm" label-width="80px" :model="phoneForm" v-if="tabName=='yzm'" class="login-form">
<!--            <input type="hidden" id="verifyCodeId" name="verifyCodeId" value=""/>
            <input type="hidden" id="geetest_challenge" name="geetest_challenge"/>
            <input type="hidden" id="geetest_validate" name="geetest_validate"/>
            <input type="hidden" id="geetest_seccode" name="geetest_seccode"/>-->

            <el-form-item>
              <span style="font-weight: bold;font-size: 18px">验证码登录</span>
            </el-form-item>
            <el-form-item prop="phone" label="手机号码" :rules="vType('mobile', '手机号码', true, 'blur')">
              <el-input placeholder="请输入手机号码" v-model="phoneForm.phone">
              </el-input>
            </el-form-item>
            <el-form-item prop="code" class="el-item_yzm"
                          :rules="vType('','验证码',true,'change')">
              <label slot="label"><span>验&#8194;证&#8194;码</span></label>
              <el-input v-model="phoneForm.code" auto-complete="off"
                        placeholder="请输入验证码">
              </el-input>
              <timer-login ref="disabledLogin" class="btn btn-default"
                           v-on:run="sendCode(phoneForm.phone,'disabledLogin')"
                           v-on:stop="setDisabled(false,'disabledLogin')"
                           :disabled="disabledLogin" :second="60">
              </timer-login>
            </el-form-item>

            <el-form-item style="margin-top: 32px">
              <el-button type="warning" class="base-btn register-btn"
                         @click="phoneLogin"
                         :loading="phoneLoading">登录
              </el-button>
            </el-form-item>
            <div class="login-method">
              <a @click="goRegister">
                立即注册
              </a>
              <a @click="methodChange">
                账号登录
              </a>
            </div>
          </el-form>

          <el-form ref="accountForm" label-width="80px" :model="accountForm" v-else class="login-form">
            <el-form-item>
              <span style="font-weight: bold;font-size: 18px">账号登录</span>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone" :rules="vType('mobile', '手机号码', true, 'blur')">
              <el-input placeholder="请输入手机号码"
                        v-model="accountForm.phone">
              </el-input>
            </el-form-item>
            <el-form-item prop="password" :rules="vType('pwd', '密码', true, 'blur')">
              <label slot="label"><span>密&#12288;&#12288;码</span></label>
              <el-input type="password" placeholder="请输入密码"
                        v-model="accountForm.password">
              </el-input>
            </el-form-item>
            <el-form-item style="margin-top: 32px">
              <el-button type="warning" class="base-btn register-btn"
                         @click="accountLogin"
                         :loading="accountLoading">
                登录
              </el-button>
            </el-form-item>
            <div class="login-method">
              <a @click="goRegister">
                立即注册
              </a>
              <a @click="methodChange">
                验证码登录
              </a>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import top from '../layout/top';
import {geetByCode, sendVeriCode} from '@/api/login/login';
import {mapActions} from 'vuex';
import timerLogin from '../common/yzm'
import  '@/utils/gt';
export default {
  data() {
    return {
      disabledLogin:false,
      reg: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      showYzmBtn: false,
      tabName:'yzm',
      countFlag: false,//获取验证码
      accountLoading: false,
      phoneLoading: false,
      title: '获取验证码',
      accountForm: {
        phone: '',
        password: '',
        appCode: 'WMR'
      },
      phoneForm: {
        phone: '',
        code: '',
        appCode: 'WMR'
      },
      isSendSMS: false,
      captchaObj: {},
      lastTime: 0
    }
  },
  watch: {
    captchaObj:{
      deep: true,
      handler:function (newV,oldV) {
        setTimeout(()=>{
          newV.verify()
        },100)
      }
    }
  },
  components: {
    top,timerLogin
  },
  methods: {
    ...mapActions(['LoginAction']),
    /***
     * 发送短信验证码
     * author：fsg
     */
    sendMessage(phone) {
      let _ = this;
      sendVeriCode(phone,'loginPhone').then(response => {
        if (response.code === 200) {
          _.isSendSMS = true;
          _.$message.success('验证码已发送！');
        }
      });
    },

    /***
     * 点击发送验证码
     * 防止重复点击触发事件
     * author：fsg
     */
    sendCode(val,param){
      if(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(val)){
        let now = new Date().valueOf();
        if(this.lastTime == 0){
          this.lastTime = now;
          this.initGeet();
        }else{
          if((now - this.lastTime) > 2000){
            this.lastTime = now;
            this.initGeet();
          }
        }
      }else{
        this.$message({
          message: '请输入正确的手机号！',
          type: 'warning'
        });
      }
    },
    setDisabled(val,param){
      this[param] = val;
    },
    /***
     * 极验
     * 初始化
     * author：fsg
     */
    initGeet(){
      let _ = this;
      geetByCode({
        phone: this.phoneForm.phone
      }).then(response => {
        if (response.code === 200) {
          window.initGeetest({
            challenge: JSON.parse(response.data).challenge,
            gt: JSON.parse(response.data).gt,
            success: JSON.parse(response.data).success,
            offline: false,
            new_captcha: true,
            product: "bind"
          }, _.handler);
        }
      });
    },
    handler(captchaObj) {
      let _ = this;
      captchaObj.onReady(function () {
        captchaObj.appendTo('#captcha');
        _.captchaObj = captchaObj;
      });
      captchaObj.onSuccess(function () {
        _.setDisabled(true,'disabledLogin'); //设置按钮不可用
        _.$refs['disabledLogin'].start(); //启动倒计时
        _.sendMessage(_.phoneForm.phone)
      });
    },
    goRegister(){
      this.$router.push({
        path: '/register'
      })
    },
    /***
     * 登录
     * tab切换
     * author：fsg
     */
    methodChange(){
      this.tabName = this.tabName=='pwd'?'yzm':'pwd';
      this.$refs.accountForm && this.$refs.accountForm.clearValidate();
      this.$refs.phoneForm && this.$refs.phoneForm.clearValidate();
    },
    //************账号登录*************
    accountLogin() {
      let _ = this;
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          _.accountAction();
        } else {
          _.showFormError(_);
        }
      });
    },
    accountAction() {
      let _ = this;
      this.accountLoading = true;
      const {state, LoginAction} = this;
      LoginAction(this.accountForm).then((data) => {
        _.accountLoading = false;
      }).catch((e) => {
        _.accountLoading = false;
      });
    },
    showFormError(_) {
      setTimeout(function () {
        _.vTool.showSingleError();
      }, 10);
    },

    //************手机验证码登录*************
    phoneLogin() {
      let _ = this;
      this.$refs.phoneForm.validate(valid => {
        if (valid) {
          if(_.isSendSMS){
            _.phoneAction();
          }else{
            _.$message({
              message: '请先获取验证码！',
              type: 'warning'
            });
          }
        } else {
          _.showFormError(_);
        }
      });
    },
    phoneAction() {
      let _ = this;
      this.phoneLoading = true;
      const {state, LoginAction} = this;
      LoginAction(this.phoneForm).then((data) => {
        _.phoneLoading = false;
      }).catch((e) => {
        _.phoneLoading = false;
      });
    }
  }
}
</script>

<style lang="scss">
.btn-default{
  position: absolute;
  right: 2px;
  top: 8px;
  height: 24px!important;
  line-height: 24px!important;
  background: white!important;
  color: #edbb03!important;
}
</style>
